<template>
  <div class="shopSay">
    <header>
      <strong>时间选择:</strong>
      <p>
        <button class="active">本部</button>
        <button>今天</button>
        <button>昨天</button>
        <button>最近7天</button>
        <button>最近30天</button>
        <button>本月</button>
        <button class="active2">本年</button>
      </p>
      <span>
        <input type="date" class="input" />
      </span>
    </header>
    <div class="nav">
      <p>
        <span>评价状态:</span>
        <el-input placeholder="请输入内容" v-model="input1" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </p>
      <p>
        <span>商品搜索:</span>
        <el-input placeholder="请输入内容" v-model="input2" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </p>
      <p>
        <span>用户名称:</span>
        <el-input placeholder="请输入" v-model="input3" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </p>
    </div>
    <div class="navhead">
      <el-button type="text" @click="dialogFormVisible = true">添加虚拟评论</el-button>
      <el-dialog title="提示" :visible.sync="dialogFormVisible" class="DialogBox">
        <el-form :model="form">
          <el-form-item label="商品" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="评论文字" prop="desc" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item
            label="商品分数"
            prop="desc"
            :label-height="formLabelHeight"
            :label-width="formLabelWidth"
          >
            <el-rate v-model="value2" :colors="colors"></el-rate>
          </el-form-item>
          <el-form-item
            label="服务分数"
            prop="desc"
            :label-height="formLabelHeight"
            :label-width="formLabelWidth"
          >
            <el-rate v-model="value2" :colors="colors"></el-rate>
          </el-form-item>
          <el-form-item label="用户头像" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="评价图片" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="title" label="商品信息" width="120"></el-table-column>
        <el-table-column prop="name" label="用户名称" width="120"></el-table-column>
        <el-table-column prop="num" label="商品评分" width="120"></el-table-column>
        <el-table-column prop="num" label="服务评分" width="150"></el-table-column>
        <el-table-column prop="content" label="评价内容"></el-table-column>
        <el-table-column prop="callmain" label="回复内容" width="150"></el-table-column>
        <el-table-column prop="data" label="评价时间" width="180"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="dialogFormVisible = true" size="small">回复</el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="1000" class="pageBox"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      input3: "",
      input1: "",
      input2: "",
      dialogFormVisible: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      imageUrl: "",
      value: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      value1: null,
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      formLabelWidth: "120px",
      formLabelHeight: "50px"
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    open() {
      this.$bus.$emit("openDiv", true);
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleEdit() {
      console.log(1);
      console.log(this.tableDate);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  },
  created() {
    this.$api.shopSay().then(res => {
      this.tableData = res.data.list.slice(0, 5);
    });
  }
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: space-around;
}
.pageBox {
  margin-top: 50px;
  width: 100%;
}
.DialogBox {
  text-align: left;
}
.shopSay {
  width: 100%;
  height: 100%;
  background: #ffff;
  // margin: 10px;
  /* margin-top: 28px; */
  border-radius: 5px;
  padding: 20px;
  header {
    height: 60px;
    display: flex;
    line-height: 60px;
    strong {
      margin-right: 18px;
    }
    button {
      border: 0;
      padding: 5px 15px;
    }
    span {
      margin-left: 30px;
    }
  }
  span {
    height: 60px;
    input {
      width: 220px;
    }
  }
  .active {
    background: #409eff;
    border-radius: 5px 0 0 5px;
    color: #fff;
  }
  .active2 {
    border-radius: 0 5px 5px 0;
  }
}
.el-rate {
  line-height: 50px;
}
.DialogBox {
  border-radius: 10px;
}
.nav {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    display: flex;
    width: calc(100% / 3);
    align-items: center;
    > span {
      width: 90px;
      line-height: 60px;
      text-align: center;
    }
  }
}
.navhead button {
  border: 0;
  padding: 8px 20px;
  background: #409eff;
  color: #fff;
  display: flex;
  border-radius: 6px;
}
.table {
  margin-top: 18px;
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>